<template>
  <ProvideA />
  <button @click="handleClick">点击</button>
</template>

<script setup lang="ts">
import { provide, ref, reactive } from 'vue'
import ProvideA from '@/components/ProvideA.vue'
import { titlekey, refTitleKey, reactiveTitleKey } from './symbolKey'
defineOptions({ name: 'PageProvide' })
// 把key传入第一个参数的位置，限制第二个参数必须是string类型
const title2 = ref('title2')
const title3 = reactive({ title: 'title3' })
provide(titlekey, 'this is title')
provide(refTitleKey, title2)
provide(reactiveTitleKey, title3)
const handleClick = () => {
  title2.value = 'title2 changed'
  title3.title = 'title3 changed'
}
</script>

<style scoped lang="scss"></style>
